import { Link, useLocation } from "umi";
import { useState, useEffect } from 'react'

export default () => {
  let location = useLocation(),
    [active, setActive] = useState(0),
    nav = [
      { path: '/', title: '文章' },
      { path: '/archives', title: '归档' },
      { path: '/knowledge', title: '知识小册' },
      { path: '/page/msgboard', title: '留言板' },
      { path: '/page/about', title: '关于' }
    ];

  useEffect(() => {
    nav.forEach((v, i) => location.pathname === v.path && setActive(i))
  }, [])

  return <header>
    <div className='header-content'>
      <div className='header-icon'>
        <Link to="/" onClick={() => setActive(0)}>
          <img height="36" src="https://wipi.oss-cn-shanghai.aliyuncs.com/2021-02-20/wipi-logo.png" />
        </Link>
      </div>
      <nav>
        <ul>
          {nav.map((v, i) => (
            <li className={active === i ? 'active' : ''} key={i} onClick={() => setActive(i)}>
              <Link to={v.path}><span>{v.title}</span></Link>
            </li>
          ))}
        </ul>
      </nav>
    </div>
  </header>
}
